<template>
     <a-card class="blog-container">
            <div class="head" v-if="props.blogInfo">
                <div class="head-title">{{ props.blogInfo.title }}</div>
                <div class="head-nav">
                    <div class="n-time">{{ props.blogInfo.createTime }}</div>
                    <div class="n-name">作者&nbsp;:&nbsp;&nbsp;<span @click="toRouter('/user')">{{ props.blogInfo.nickName
                    }}</span> </div>
                    <div class="n-ceta">分类专栏&nbsp;:&nbsp;&nbsp;<span @click="toRouter('/category')">{{
                            props.blogInfo.categoryName
                    }}</span></div>
                </div>
            </div>
            <blog-content :content="props.blogInfo.content"></blog-content>
        </a-card>
</template>

<script setup>
import { useRouter } from "vue-router";
import { getCurrentInstance, nextTick, onMounted } from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-light.css"; //样式
import BlogContent from '@/components/blog-content.vue';
const router = useRouter();
const { proxy } = getCurrentInstance();
const  props = defineProps({
    blogInfo: {
        type: Object,
        required: true
    }
})

const toRouter = (url) => {
    router.push({
        path: url
    });
}

// onMounted(() => {
//     nextTick(() => {
//         //高亮显示
//         let blocks = document.querySelectorAll("pre code");
//         console.log(blocks)
//         blocks.forEach((block) => {
//             hljs.highlightBlock(block);
//         });
//     });
// })

</script>

<style lang="scss" scoped>
 .blog-container {
        flex: 1;
        width: 100%;
        min-height: 100%;
        // margin-right: 20px;

        .head {
            display: flex;
            flex-direction: column;

            .head-title {
                font-size: 26px;
                font-weight: bold;
            }

            .head-nav {
                padding: 10px;
                margin-top: 10px;
                margin-bottom: 20px;
                background: #f4f4f4;
                height: 50px;
                align-items: center;
                display: flex;
                color: #999aaa;
                font-size: 14px;

                span {
                    color: $font-color-primary;
                }

                .n-name {
                    padding-left: 20px;
                }

                .n-ceta {
                    padding-left: 20px;
                }
            }
        }

    }
</style>